<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="container">
        <div>
          <textarea name="serve" class="character" cols="30" rows="5">
使用此软件，你需要遵守以下规则
1、必须把全部钱交出来
2、不准去报警，懂吗？
          </textarea>
          <br>
          <button :disabled='status' @click="change" > {{recordClock}} </button>
          <br>
          <span :class="styleClassArray" ref="spanTextRef">{{tips}}</span>
        </div>
      </div>
    </div>
  </body>
</html>
<script>
  var myView = new Vue({
    el: '#app',
    data: {
      // 禁用状态
      status:true,
      // 时间
      time: 10,
      // 样式
      styleClassArray:["color-red","color-black"],
      // 提示信息
      tips:'必须点击“我同意”才能继续安装本软件'
      
    },
    // 通过计算属性定时
    computed: {
      recordClock() { 
        if (this.time == 0) {
          return "我同意"
        }
        return `请认真阅读服务条款和声明(${this.time})`
      }
    },
    methods: {
      // 业务操作，我同意
      change() {
        this.tips = "恭喜，你可以继续安装本软件了"
        this.styleClassArray.splice(0,1)
      },
    }
  })
let curr = setInterval(() => {
      myView.time -= 1
      if (myView.time == 0) {
        myView.status = false
        clearInterval(curr)
      }
    }, 1000)
</script>
<style lang="css">
  * {
    box-sizing: border-box;
  }
  .character {
    font-size: 14px;
    font-family: '宋体';
  }
  .tip {
    color: red;
    font-size: 12px;
  }
  #app {
    padding: 100px;
  }
  .container {
    border: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    width: 500px;
    margin: 0 auto;
  }
  .color-black{
      color:black;
     font-size: 14px;
  }
  .color-red{
    color:red;
    font-size: 14px;
  }
</style>
